
/*=========== 获取播放器元素 ============*/
/*--- 盒子元素对象 ---*/
var oVideoPlayer;
/*--- video wrapper 中的元素 ---*/
var oVideoWrapper;
var oVideo;
var aSource = [];
/*--- control banner 中的元素 ---*/
var oControlBanner;
/*--- progress bar ---*/
var oProgressBar;
var oLoadProgress;
var oCurProgress;
var oProgressBtn;
var oSign;
var oShowTime;
/*--- 播放暂停---*/
var oPauseStartBox;
var oStart;
var oPause;
/*--- 时间 ---*/
var oVideoTime;
var oCurTime;
var oTotalTime;
/*--- 屏幕大小  ---*/
var oScreen;
var oScreenI;
/*--- 设置 ---*/
var oConfiger;
/*--- 播放速度 ---*/
var oSpeedMenu;
var oSubMenu;
var aSpeedLi = [];
var oSpeed;
/*--- 声音大小 ---*/
var oVoiceVolume;
var oLoudSpeaker;
var oVolumeBar;
var oCurVolume;
var oVolumeBtn;
/*---  加载  ---*/
var oLoading;
/*--- 屏幕开始---*/
var oBtnStart;
/*---  通用属性  ---*/
var curTime = 0;
var totalTime = 0;
var url;
var isStarted = false;
var videoPlayTimer;
var currentSpeed = 4;
var isFull = false;


function getElementsByClass(cName ,parent){
	parent = parent || document;
	var arr = [];
	if(parent.getElementsByClassName){
		arr = parent.getElementsByClassName(cName);
	}else{
		var aChild = parent.getElementsByTagName("*");
		for(var i=0;i<aChild.length;i++){
			var aClassName = aChild[i].className.split(" ");
			for(var j=0;j<aClassName.length;j++){
				if(aClassName[j] == cName)
					arr.push(aChild[i]);
				break;
			}
		}
	}
	return arr;
}

function getStyle(obj , attr){
	return obj.currentStyle?obj.currentStyle[attr]: getComputedStyle(obj)[attr];
}

function translateTime(timeInSecond){
	var second = 0;
	var minute = 0;
	var hour = 0;
	second = timeInSecond % 60;
	timeInSecond = (timeInSecond - second)/60;
	minute = (timeInSecond>0)?timeInSecond%60:0;
	timeInSecond = (timeInSecond - minute) / 60;
	hour = timeInSecond;
	return (hour>0?hour+":":"")+(minute>9?"":"0")+minute+":"+(second>9?"":"0")+second;
}

var controlBar = {
	"barBtnMove" : function(parentBar,curBar,btn,curLeft,fn){
				curLeft = Math.max(btn.clientWidth/2 , curLeft);
				curLeft = Math.min(curLeft , parentBar.clientWidth - btn.clientWidth/2 );
				btn.style.left = curLeft - btn.clientWidth/2 + "px";
				curBar.style.width = curLeft + "px";
				fn && fn(curLeft);
			},

	"changeVolume" : function(curWidth){
				oVideo.volume = parseFloat(curWidth/oVolumeBar.clientWidth).toFixed(2);
			},
	"changeVideoTime" : function(curWidth){
				oVideo.currentTime = parseInt((curWidth/oProgressBar.clientWidth)*totalTime);
				curTime = oVideo.currentTime;
			},
	
	"hideProgressBar" : function(){
				oProgressBar.className = "progress-bar";
				oProgressBtn.className = "progress-btn";
			},

	
	"showProgressBar" : function(){
				oProgressBar.className += " progress-bar-show";
				oProgressBtn.className += " progress-btn-show";
			},

	"subMenuHide" : function(){
				oSubMenu.className = "sub-menu";
			},

	"subMenuShow" : function(){
				oSubMenu.className += " sub-menu-show";
			},

	"timeSignShow" : function(pos){
				oShowTime.style.display = "block";
				oSign.style.display = "block";
				oSign.style.left = pos - oProgressBar.offsetLeft + "px";
				var showTimeLeft = Math.max(0,pos - oShowTime.clientWidth/2 - oProgressBar.offsetLeft );
				showTimeLeft = Math.min(showTimeLeft,oProgressBar.clientWidth - oShowTime.clientWidth);
				oShowTime.style.left = showTimeLeft + "px";
				oShowTime.innerHTML = translateTime(parseInt(totalTime * pos/oProgressBar.clientWidth));
			},
	"timeSignHide" : function(){
				oShowTime.style.display = "none";
				oSign.style.display = "none";
			},
}
var playerEvent = {

	"controlEvent" : function(){
				/* control banner */
				oControlBanner.onmouseover = controlBar.showProgressBar;
				oControlBanner.onmouseout = controlBar.hideProgressBar;

				oProgressBar.onclick = function(e){
					e = e || event;
					controlBar.showProgressBar();
					controlBar.barBtnMove(oProgressBar,oCurProgress,oProgressBtn,e.pageX - this.offsetLeft,controlBar.changeVideoTime);
				}

				oProgressBar.onmouseover = function(){
					oShowTime.style.display = "block";
					oSign.style.display = "block";
					oProgressBar.onmousemove = function(e){
						e = e || event;
						controlBar.timeSignShow(e.pageX);
				}

				}
				oProgressBar.onmouseout = function(){
					oProgressBar.onmousemove = null;
					controlBar.timeSignHide();
				}

				//按钮
				oProgressBtn.onmousedown = function(e){
					e = e || event;
					var downX = e.pageX;
					var startLeft = this.offsetLeft;
					document.onmousemove = function(e){
						e = e || event;
						controlBar.showProgressBar();
						controlBar.barBtnMove(oProgressBar,oCurProgress,oProgressBtn,startLeft + e.pageX - downX + oProgressBtn.clientWidth/2,controlBar.changeVideoTime);
						controlBar.timeSignShow(e.pageX);
					}
				}

				document.onmouseup = function(){
					document.onmousemove = null;
					controlBar.hideProgressBar();
					controlBar.timeSignHide();
				}

				/*  播放开始暂停 */
				oPauseStartBox.onclick = function(){
					if(isStarted){
						oVideo.pause();
					}else{
						oVideo.play();
					}
				}
				oBtnStart.onclick = function(){
					oVideo.play();
				}
				document.onkeydown = function(e){
					if(e.keyCode == 32){
						if(isStarted){
							oVideo.pause();
						}else{
							oVideo.play();
						}
					}
				}
				/*  播放速度  */
				oSpeedMenu.onclick = function(e){
					e = e || event;
					e.cancelBubble = true;
					controlBar.subMenuShow();
				}
				oSpeedMenu.onmouseleave = function(e){
					e = e || event;
					e.cancelBubble = true;
					controlBar.subMenuHide();
				}
				for(var i=0;i<5;i++){
					aSpeedLi[i].onclick = function(){
						oVideo.playbackRate = 2 - this.index * 0.25;
						this.className = "selected";
						aSpeedLi[currentSpeed].className = "";
						oSpeed.innerHTML = 2 - this.index * 0.25 +"<i> x</i>"
						currentSpeed = this.index;
					}
				}
				
				/*  音量  */
				var loudSpeakerIsOpened = true;
				oVideo.volume = 0.7;

				oLoudSpeaker.onclick = function(){
					if(loudSpeakerIsOpened){
						videoPlayer.loudSpeakerClose();
					}else{
						videoPlayer.loudSpeakerOpen();
					}
					loudSpeakerIsOpened = !loudSpeakerIsOpened;
				}
				oVolumeBar.onclick = function(e){
					e = e || event;
					controlBar.barBtnMove(oVolumeBar,oCurVolume,oVolumeBtn,e.pageX-this.offsetLeft,controlBar.changeVolume); 
				}
				oVolumeBtn.onmousedown = function(e){
					e = e || event;
					var downX = e.clientX;
					var startLeft = this.offsetLeft;
					document.onmousemove = function(e){
						e = e || event;
						controlBar.barBtnMove(oVolumeBar,oCurVolume,oVolumeBtn,startLeft + e.clientX - downX,controlBar.changeVolume);
					}
				}
				/*  全屏  */
					
				oScreen.onclick = function(){
					isFull?videoPlayer.exitFullScreen():videoPlayer.fullScreen(oVideoPlayer);
				}
				document.onmozfullscreenchange = videoPlayer.fullScreenChange;
				oVideoPlayer.onwebkitfullscreenchange = videoPlayer.fullScreenChange;
			},
	"videoEvent" : function(){
				oVideo.addEventListener("playing",function(){
					oLoading.style.display = "none";
				}); 
				oVideo.addEventListener("canplay",function(){
					playerEvent.controlEvent();
					totalTime = parseInt(oVideo.duration);
					oTotalTime.innerHTML = translateTime(totalTime) + "";
					oVideo.play();
				});
				oVideo.addEventListener("waiting",function(){
					oLoading.style.display = "block";
				});
				oVideo.addEventListener("stalled",function(){
					
				});
				oVideo.addEventListener("play",function(){
					videoPlayer.videoPlay();
				});
				oVideo.addEventListener("pause",function(){
					videoPlayer.videoPause();
				});
				oVideo.addEventListener("ended",function(){
					oVideo.pause();
				});
			}
}

var videoPlayer  = {
	"execute" : function(json){
				url = json.url;
				videoPlayer.init();
				aSource[0].src = url;
				playerEvent.videoEvent();
			},
	"init" : function(){
				//插入播放器各组件
				oVideoPlayer = getElementsByClass( "video-player" )[0];
				
				/*---  video   ---*/
				oVideoWrapper = document.createElement("div");
				oVideoWrapper.className = "video-wrapper";
				oVideo = document.createElement("video");
				aSource[0] = document.createElement("source")
				aSource[0].type = "video/mp4";
				oVideo.appendChild(aSource[0]);
				oLoading = document.createElement("div");
				oLoading.className = "loading";
				oLoading.innerHTML = "<i class='iconfont icon-jiazaizhong'></i>"
				oVideoWrapper.appendChild(oVideo);
				oVideoWrapper.appendChild(oLoading);
				
				/*--- control banner ---*/
				oControlBanner = document.createElement("div");
				oControlBanner.className = "control-banner control-banner-full";

				oProgressBar = document.createElement("div");
				oProgressBar.className = "progress-bar";
				oLoadProgress = document.createElement("div");
				oLoadProgress.className = "load-progress";
				oCurProgress = document.createElement("div");
				oCurProgress.className = "cur-progress";
				oProgressBtn = document.createElement("div");
				oProgressBtn.className = "progress-btn";
				oSign = document.createElement("div");
				oSign.className = "sign";
				oShowTime = document.createElement("div");
				oShowTime.className = "show-time";
				oProgressBar.appendChild(oLoadProgress);
				oProgressBar.appendChild(oCurProgress);
				oProgressBar.appendChild(oProgressBtn);
				oProgressBar.appendChild(oSign);
				oProgressBar.appendChild(oShowTime);

				
				oPauseStartBox = document.createElement("div");
				oPauseStartBox.className = "pause-start";
				oStart = document.createElement("div");
				oStart.className = "icon-start";
				oPause = document.createElement("div");
				oPause.className = "icon-pause";
				oPauseStartBox.appendChild(oStart);
				oPauseStartBox.appendChild(oPause);


				oVideoTime = document.createElement("div");
				oVideoTime.className = "video-time";
				oCurTime = document.createElement("span");
				oCurTime.innerHTML = "00:00";
				oCurTime.className = "cur-time";
				var oi = document.createElement("i");
				oi.innerText = "/";
				oTotalTime = document.createElement("span");
				oTotalTime.className = "total-time";
				oTotalTime.innerHTML = "00:00";
				oVideoTime.appendChild(oCurTime);
				oVideoTime.appendChild(oi);
				oVideoTime.appendChild(oTotalTime);

				oScreen = document.createElement("div");
				oScreen.title = "全屏";
				oScreen.className = "screen";
				oScreenI = document.createElement("i");
				oScreenI.className = "iconfont icon-shipinlei-shiyingpingmu";
				oScreen.appendChild(oScreenI);

				oConfiger = document.createElement("div");
				oConfiger.className = "configer";
				var oConfigerI = document.createElement("i");
				oConfigerI.className = "iconfont icon-shezhi";
				oConfiger.appendChild(oConfigerI);
				
				oSpeedMenu = document.createElement("div");
				oSpeedMenu.className = "menu-speed";
				oSubMenu = document.createElement("div");
				oSubMenu.className = "sub-menu";
				var oSpeedUl = document.createElement("ul"); 
				for(var i=0;i<5;i++){
					aSpeedLi[i] = document.createElement("li");
					aSpeedLi[i].index = i;
					aSpeedLi[i].innerHTML = 2 - i * 0.25 + "<i> x</i>";
					oSpeedUl.appendChild(aSpeedLi[i]);
				}
				aSpeedLi[4].className = "selected";
				oSubMenu.appendChild(oSpeedUl);
				oSpeed = document.createElement("div");
				oSpeed.className = "speed";
				oSpeed.innerHTML = "1<i> x</i>";
				oSpeedMenu.appendChild(oSubMenu);
				oSpeedMenu.appendChild(oSpeed);

				oVoiceVolume = document.createElement("div");
				oVoiceVolume.className = "volume";
				oLoudSpeaker = document.createElement("i");
				oLoudSpeaker.className = "loudspeaker iconfont icon-quxiaojingyinzhuanhuan-copy";
				oVoiceVolume.appendChild(oLoudSpeaker);
				oVolumeBar = document.createElement("div");
				oVolumeBar.className = "volume-banner";
				oCurVolume = document.createElement("div");
				oCurVolume.className = "cur-volume";
				oVolumeBtn = document.createElement("div");
				oVolumeBtn.className = "volume-btn";
				oVolumeBar.appendChild(oCurVolume);
				oVolumeBar.appendChild(oVolumeBtn);
				oVoiceVolume.appendChild(oVolumeBar);

				oControlBanner.appendChild(oProgressBar);
				oControlBanner.appendChild(oPauseStartBox);
				oControlBanner.appendChild(oVideoTime);
				oControlBanner.appendChild(oScreen);
				oControlBanner.appendChild(oConfiger);
				oControlBanner.appendChild(oSpeedMenu);
				oControlBanner.appendChild(oVoiceVolume);
				
				oBtnStart = document.createElement("div");
				oBtnStart.className = "btn-start";

				oVideoPlayer.appendChild(oVideoWrapper);
				oVideoPlayer.appendChild(oControlBanner);
				oVideoPlayer.appendChild(oBtnStart);

			},
	"exitFullScreen" : function(){   
				 if(document.exitFullscreen) {  
					document.exitFullscreen();  
				  } else if(document.mozCancelFullScreen) {  
					document.mozCancelFullScreen();
				  } else if(document.webkitExitFullscreen) {  
					document.webkitExitFullscreen();  
				  }  
			},
	"fullScreen" : function (obj){
				var requestMethod = obj.requestFullScreen || obj.webkitRequestFullScreen ||  obj.mozRequestFullScreen || obj.msRequestFullScreen; 
				requestMethod.call(obj);
			},
	"fullScreenChange" : function(){
				if(isFull){
					oVideoWrapper.style.width = "66%";
					oVideoWrapper.style.height = "520px";
					oControlBanner.className = "control-banner";
					oScreen.title = "全屏";
					oScreenI.className = "iconfont icon-shipinlei-shiyingpingmu";
				}else{
					oVideoWrapper.style.width = "100%";
					oVideoWrapper.style.height = "100%";
					oControlBanner.className += " ctrl-full-screen";
					oScreen.title = "退出全屏";
					oScreenI.className = "iconfont icon-tuichuquanping";
				}
				isFull = !isFull;
			},
	"loudSpeakerClose" : function(){
				oVideo.muted = true;
				oLoudSpeaker.className ="loudspeaker iconfont icon-kaishijingyinzhuanhuan-copy";
			},
	"loudSpeakerOpen" : function(){
				oVideo.muted = false;
				oVideo.volume = parseFloat(oCurVolume.clientWidth/oVolumeBar.clientWidth).toFixed(2);
				oLoudSpeaker.className ="loudspeaker iconfont icon-quxiaojingyinzhuanhuan-copy";
			},
	"videoPlay" : function(){
				isStarted = true;
				oBtnStart.style.display = "none";
				oStart.style.display = "none";
				oPause.style.display = "block";
				oLoading.style.display = "none";
				videoPlayTimer = window.setInterval(videoPlayer.videoPlaying,13);
			},
	"videoPlaying" : function(){
				curTime = parseInt(oVideo.currentTime);
				oCurTime.innerHTML = translateTime(curTime) + "";
				controlBar.barBtnMove(oProgressBar,oCurProgress,oProgressBtn,oProgressBar.clientWidth*oVideo.currentTime/totalTime);
			},
	"videoPause" : function(){
				isStarted = false;
				oBtnStart.style.display = "block";
				oStart.style.display = "block";
				oPause.style.display = "none";
				window.clearInterval(videoPlayTimer);
			}
}

function VideoPlayer(json){
	videoPlayer.execute(json);
}
VideoPlayer.prototype.start = function(){
	videoPlayer.videoPlay();
}
VideoPlayer.prototype.stop = function(){
	videoPlayer.videoPause();
}

